<template>
    <view class="container">
        <!-- 顶部搜索区域 -->
        <view class="search-container">
            <view class="search-box">
                <text class="iconfont icon-search"></text>
                <input v-model="orderId" placeholder="请输入订单号搜索" placeholder-class="placeholder" confirm-type="search"
                    @confirm="searchOrder" />
                <button class="search-btn" @click="searchOrder">搜索</button>
            </view>
        </view>

        <!-- 商品列表区域 -->
        <view class="order-list">
            <view class="order-item" v-for="item in orderList" :key="item.id"
                @click="goToDetail(item.order_sn, item.id)">
                <view class="order-header">
                    <text class="order-sn">订单编号：{{ item.order_sn }}</text>
                </view>
                <view class="order-title">
                    <text>{{ item.goods_name }}</text>
                </view>
                <view class="order-money">
                    <text>实付 ¥{{ item.payment_money }}</text>
                </view>
                <view class="merchat-remark">
                    门店备注：{{ item.merchant_remark || "" }}
                </view>
                <button class="detail-btn" @click.stop="goToDetail(item.order_sn, item.id)">订单详情</button>
            </view>
        </view>

        <!-- 无数据提示 -->
        <view class="empty-list" v-if="orderList.length === 0">
            <text>暂无订单数据</text>
        </view>
    </view>
</template>

<script>
import { getOrderDetails } from "@/api/my.js"
export default {
    data() {
        return {
            orderId: '',
            orderList: []
        }
    },
    onLoad() {
        this.getorderList();
    },
    methods: {
        //订单列表
        getorderList() {
            getOrderDetails().then((res) => {
                this.orderList = res.data
            })
        },
        // 搜索订单
        searchOrder() {
            if (!this.orderId.trim()) {
                uni.showToast({
                    title: '请输入订单号',
                    icon: 'none'
                });
                return;
            }
            getOrderDetails(
                { orderSn: this.orderId }
            ).then((res) => {
                if (res.code == 1) {
                    this.orderId = ""
                    uni.navigateTo({
                        url: `/pages/xhforderdetail/xhforderdetail?orderId=${res.data.order_sn}&id=${res.data.id}`
                    });
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                    this.orderId = ""
                }
            })
        },
        // 跳转到订单详情页
        goToDetail(orderId, Id) {
            uni.navigateTo({
                url: `/pages/xhforderdetail/xhforderdetail?orderId=${orderId}&id=${Id}`
            });
        }
    }
}
</script>

<style>
.container {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 40rpx;
}

/* 搜索区域样式 */
.search-container {
    padding: 20rpx;
    background-color: #fff;
}

.search-box {
    display: flex;
    align-items: center;
    height: 76rpx;
    background-color: #f7f7f7;
    border-radius: 38rpx;
    padding: 0 20rpx;
}

.search-box .iconfont {
    font-size: 32rpx;
    color: #999;
    margin-right: 10rpx;
}

.search-box input {
    flex: 1;
    font-size: 28rpx;
    height: 100%;
    color: #333;
}

.placeholder {
    color: #999;
}

.search-btn {
    margin-left: 20rpx;
    background-color: #fea614;
    color: #fff;
    font-size: 28rpx;
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 30rpx;
    border-radius: 30rpx;
}

/* 订单列表样式 */
.order-list {
    padding: 20rpx;
}

.order-item {
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.order-header {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 10rpx;
}

.order-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
    line-height: 40rpx;
}

.order-money {
    font-size: 28rpx;
    color: #fea614;
    font-weight: bold;
    margin-bottom: 20rpx;
}

.merchat-remark {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 20rpx;
}

.detail-btn {
    background-color: #f7f7f7;
    color: #333;
    font-size: 28rpx;
    padding: 12rpx 24rpx;
    border-radius: 8rpx;
}

/* 无数据提示 */
.empty-list {
    text-align: center;
    padding-top: 200rpx;
    color: #999;
    font-size: 28rpx;
}
</style>